<template>
  <div id="background">
    <div id="logo">行为决策实验平台</div>

    <div id="text">
      <el-card class="box-card">
        <div id="from">
          <h3>感谢您参与我们的行为决策实验</h3>
          <h3>请您等候实验员的指令在点击下方按钮进入实验</h3>
          <el-button type="primary" @click="sure">进入实验</el-button>
        </div>
      </el-card>

    </div>
    <div id="clock">
      <div id="time">{{time}}</div>
      <div id="date">{{date}}</div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      time:'',
      date:'',
    }
  },
  mounted() {
  this.$nextTick(()=>{
    setInterval(
      this.update_clock
    ,1000)
  })
},
methods: {
  update_clock(){
    var d = new Date()
    var year = d.getYear()
    var a = d.toLocaleString()
    if (year<10) {
      year = "0" +year
    }
    var mon = d.getMonth();//.toString().toStatr()
    if (mon<10) {
      mon = "0" +mon
    }
    var day = d.getDay()
    if (day<10) {
      day = "0" + day
    }
    var hour = d.getHours();
    if (hour<10) {
      hour = "0" +hour
    }
    var minute = d.getMinutes();
    if (minute<10) {
      minute = "0" +minute
    }
    var b = d.toLocaleDateString()
    this.time = hour+":"+minute
    this.date = b
  },
    sure(){
      this.$router.push('/changci')
    }
  },
}
</script>

<style scoped>
#background{
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    LightSkyBlue,
    DodgerBlue
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

#logo{
  color: aliceblue;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 8%;
  left: 34%;

}

#text{
  position: absolute;
  top: 30%;
  left: 38%;
}
.el-card {
  width: 373px;
  height: 210px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 15px;
}


#clock{
color: aliceblue;
position: absolute;
top: 70%;
left: 15%;
text-align: left;
}
#time{
font-size: 100px;
}
#date{
font-size: 35px;
}

.el-button{
  margin-left: 110px;
}
</style>
